<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆包MarsCode 花样贪吃蛇</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
</head>
<body>
    <script>
        // 使用 p5.js 实现一个浏览器可玩的贪吃蛇游戏

        let snake;
        let food = [];
        let gridSize = 20;
        let cols, rows;
        let score = 0;

        function setup() {
            let canvas = createCanvas(640, 480);
            canvas.parent(document.body); // 将画布添加到 HTML body 中
            frameRate(10);
            cols = floor(width / gridSize);
            rows = floor(height / gridSize);
            snake = new Snake();
            for (let i = 0; i < 3; i++) {
                generateFood();
            }

            // 设置画布样式
            canvas.style('margin', 'auto');
            canvas.style('display', 'block');
            canvas.style('border', '10px solid #0000FF'); // 添加蓝色边框
            canvas.style('background-color', '#D3D3D3'); // 设置灰色背景
        }

        function draw() {
            background(211, 211, 211); // 设置背景颜色为灰色

            // 显示游戏标题
            fill(0);
            textSize(24);
            textAlign(CENTER, TOP);
            text("豆包MarsCode 花样贪吃蛇", width / 2, 10); // 直接使用正确编码的中文字符串

            // 显示食物
            fill(255, 0, 0);
            for (let f of food) {
                rect(f.x * gridSize, f.y * gridSize, gridSize, gridSize);
            }

            // 显示蛇
            snake.update();
            snake.show();

            // 显示分数
            fill(0);
            textSize(20);
            textAlign(LEFT, TOP);
            text("Score: " + score, 10, 40);
        }

        function keyPressed() {
            if (keyCode === UP_ARROW && snake.yspeed === 0) {
                snake.setDirection(0, -1);
            } else if (keyCode === DOWN_ARROW && snake.yspeed === 0) {
                snake.setDirection(0, 1);
            } else if (keyCode === LEFT_ARROW && snake.xspeed === 0) {
                snake.setDirection(-1, 0);
            } else if (keyCode === RIGHT_ARROW && snake.xspeed === 0) {
                snake.setDirection(1, 0);
            }
        }

        function generateFood() {
            let x = floor(random(cols));
            let y = floor(random(rows));
            food.push(createVector(x, y));
        }

        class Snake {
            constructor() {
                this.body = [createVector(2, 2)];
                this.xspeed = 1;
                this.yspeed = 0;
            }

            setDirection(x, y) {
                this.xspeed = x;
                this.yspeed = y;
            }

            update() {
                let head = this.body[0].copy();
                head.x += this.xspeed;
                head.y += this.yspeed;

                // 检查是否吃到食物
                for (let i = food.length - 1; i >= 0; i--) {
                    if (head.x === food[i].x && head.y === food[i].y) {
                        score++;
                        this.body.push(createVector(-1, -1)); // 增长身体
                        food.splice(i, 1);
                        generateFood();
                    }
                }

                // 检查撞墙
                if (head.x < 0 || head.x >= cols || head.y < 0 || head.y >= rows) {
                    noLoop();
                    textSize(32);
                    fill(0);
                    textAlign(CENTER, CENTER);
                    text("Game Over! Final Score: " + score, width / 2, height / 2);
                }

                // 检查撞到自己
                for (let segment of this.body) {
                    if (head.x === segment.x && head.y === segment.y) {
                        noLoop();
                        textSize(32);
                        fill(0);
                        textAlign(CENTER, CENTER);
                        text("Game Over! Final Score: " + score, width / 2, height / 2);
                    }
                }

                this.body.unshift(head);
                this.body.pop();
            }

            show() {
                fill(0, 255, 0);
                for (let i = 1; i < this.body.length; i++) {
                    rect(this.body[i].x * gridSize, this.body[i].y * gridSize, gridSize, gridSize);
                }

                // 画蛇头
                fill(255, 255, 0);
                rect(this.body[0].x * gridSize, this.body[0].y * gridSize, gridSize, gridSize);
            }
        }
    </script>
</body>
</html>
